iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 27
0
自我挑戰組

介面設計流程與開發2系列 第 27

切版-以Daily UI 07- Setting為例1/2

  • 分享至 

  • xImage
  •  

列表出現於 APP 或網頁的比例非常高,這篇就來分享如何建立列表基本 HTML 架構,以「使用元件的概念做設計,以Daily UI 07- Setting為例3/3」的設計畫面進行切版說明。

HTML區塊建立
此畫面可分為上方標題區塊與下方列表區塊,分別以兩個 div 標籤區分區塊,並以 class 名稱 title-wrap 及 content 區分,結構如下:

<div class="title-wrap">
    // 標題處內容
</div>

<div class="content">
    //列表處內容
</div>

標題區塊
此區塊元素有「回前一頁按鈕」及「標題文字」,這邊分別以 button 標籤及 p 標籤建立區塊,並以 class 名稱 back-icon 及 title 區分,結構如下:

<div class="title-wrap">
    // 標題處內容
    <button href="#" class="back-icon"><img src="img/btnBack.png"></button>
    <p class="title">Bluetooth Connect</p>
</div>

列表區塊
此區塊元素就只有「列表」,通常我們會以 ul, li 標籤處理列表,結構如下:

<div class="content">
    <ul>
        <li class="list-item">Amanda Sound System</li>
        <li class="list-item">Rapoo A1018</li>
        <li class="list-item">Amy Bluetooth Keyboard</li>
        <li class="list-item">Candy's Keyboard</li>
    </ul>
</div>

此畫面設計較為單純,所以結構也不複雜,明天將會針對 CSS 的部分做說明,若想參考範例可至我的 Github下載,謝謝!

-Anny


上一篇
使用元件的概念做設計,以Daily UI 07- Setting為例3/3
下一篇
切版-以Daily UI 07- Setting為例2/2
系列文
介面設計流程與開發230
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言